<!--
 * @Description: 第八章 认识to系列全家桶 toRef 和 toRefs
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-11 16:40:43
-->
<template>
  <div>
    <p>to系列全家桶</p>
    <div>toRef</div>
    <div>
      <p>普通的对象 normalObj: {{ normalObj }}</p>
      <p>普通的对象 normalObj 的类型: {{ typeof normalObj }}</p>
      <p>普通的对象 normalObj ToRef 的 like : {{ normalObjLike }}</p>
      <button @click="editNormalObj">修改normalObj</button>
      <p>响应式的对象 reactiveObj: {{ reactiveObj }}</p>
      <p>响应式的对象 reactiveObj 的类型: {{ typeof reactiveObj }}</p>
      <p>响应式的对象 reactiveObj ToRef 的 like : {{ reactiveObjLike }}</p>
      <button @click="editReactiveObj">修改reactiveObj</button>
    </div>
    <hr />
    <div>toRefs</div>
    <p>reactiveObj toRefs 解构取值</p>
    <ul>
      <li>reactiveObj toRefs 后 的 name : {{ name }}</li>
      <li>reactiveObj toRefs 后 的 age : {{ age }}</li>
      <li>reactiveObj toRefs 后 的 like : {{ like }}</li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef, toRefs } from 'vue'

const normalObj = {
  name: 'IA',
  age: 100,
  like: 'jk',
}

// toRef 只能修改响应式对象的值， 非响应式毫无变化
// toRef 是把响应式对象的值提取出来
const normalObjLike = toRef(normalObj, 'like')

const editNormalObj = () => {
  normalObj.like = '黑丝'
  normalObjLike.value = '黑丝'
  console.log('editNormalObj: ', normalObj)
}

const reactiveObj = reactive({
  name: 'IA',
  age: 100,
  like: 'jk',
})

const reactiveObjLike = toRef(reactiveObj, 'like')

const editReactiveObj = () => {
  reactiveObjLike.value = '黑丝'
  console.log('editReactiveObj: ', normalObj)
}

// 应用场景
// 比如函数useDemo(x:string),需要传入响应式对象的其中一个值，要把对象的其中一个值传入函数
// 可以这样使用 useDemo(toRef(obj, 'x'))

// toRefs 就是遍历响应式对象的值，把每一个值都使用一遍toRef，适用于解构取值

const { name, age, like } = toRefs(reactiveObj)
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
